<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员管理系统</title>
    <style>
        .main {
            width: 80%;
            margin: 0 auto;
            text-align: center
        }

        h2 a {
            margin-right: 15px;
            color: darkcyan;
            text-decoration: none
        }

        h2 a:hover {
            color: crimson;
            text-decoration: underline
        }

        h2 a:last-child {
            margin-right: 0
        }

        .current {
            color: #f8ab0a
        }
        .red{color: red}
    </style>
</head>
<body>
<div class="main">
    <?php include_once 'nav.php';?>
    <form action="postLogin.php" method="post" onsubmit="return check()">
        <table align="center" width="80%" border="1" bordercolor="gray" cellspacing="0" cellpadding="10"
               style="border-collapse: collapse">
            <tr>
                <td align="right">用户名</td>
                <td align="left"><input name="username" class="username"><span class="red">*</span> </td>

            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left"><input type="password" name="pw"><span class="red">*</span></td>
            </tr>
            <tr>
                <td align="right"><input type="submit" value="提交"></td>
                <td align="left"><input type="reset" value="重置"></td>
            </tr>
        </table>
    </form>
</div>
<script>
    function check(){
        let username = document.getElementsByName('username')[0].value.trim();
        let pw = document.getElementsByName('pw')[0].value.trim();
        //使用正则表达式来进行用户名验证
        let usernameReg = /^[a-zA-Z0-9]{3,10}$/; //支持大小写字母，数字，长度为3至10个字符
        if(!usernameReg.test(username)){
            alert('用户名必填，且只能是大小字字符和数字构成，长度为3-10个字符');
            return false;
        }
        //使用正则表达式来进行密码的验证
        let pwReg = /^[a-zA-Z0-9_*]{6,10}$/;
        if(!pwReg.test(pw)){
            alert('密码必填，且只能是大小字符和数字，以及*、_构成，长度为6-10个字符');
            return false;
        }
    }
</script>
</body>
</html>